<template>
    <div id="app" class="header">
        <div class="head_left" @click="getItema">
            <img src="../assets/logo.png" class="img1">
        </div>
        <ul class="head_right">
            <li :class="shows==1 ? 'active' : ''"  @click="getItema(1)">首页</li>
            <li :class="shows==2 ? 'active' : ''"  @click="getItemb(2)">项目案例</li>
            <li :class="shows==3 ? 'active' : ''"  @click="getItemc(3)">关于我们</li>
            <li :class="shows==4 ? 'active' : ''"  @click="getItemd(4)">联系我们</li>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'too',
  data () {
    return {
      shows: 1, // 0为默认选择第一个，-1为不选择
    }
  },
  mounted(){
    var pataurl = this.$route.path;
    if(pataurl == "/" || pataurl == "/index"){
        this.shows  =  1
	}else if(pataurl == "/projects" || pataurl == "/details"){
        this.shows  =  2
    }else if(pataurl == "/abouts"){
        this.shows  =  3
    }else if(pataurl == "/contact"){
        this.shows  =  4
    }

  },
  methods:{
     getItema() {
        //this.shows = 1;  // 把当前点击元素的index，赋值给activeClass
        this.$router.push({path:'/index'})
     },
     getItemb() {
        //this.shows = 2;
        this.$router.push({path:'/projects'})
     },
     getItemc() {
        this.$router.push({path:'/abouts'})
     },
     getItemd() {
        this.$router.push({path:'/contact'})
     },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
*{
    margin: 0;
    padding: 0;
}
.header,.head_right{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header{
    padding: 0 10%;
    height: 8vw;
    font-size: 1.5vw;
    background: #0A0A0A;
    color: #FFFFFF;
}
.img1{
    width: 18vw;
    height: auto;
}
.head_right{
    width: 45%;
    /*padding-right: 0.8rem;*/
}
.head_right li{
    list-style: none;
    cursor:pointer;
    padding: 0.2rem 0;
    border-bottom: 2px solid #0A0A0A;
}
.active {
  border-bottom: 2px solid #ffffff!important;
}


</style>
